<template>
	<div>
		<div class="table">
			<el-table
				:data="noticeData"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="noticeId" label="公告编号" align="center" />
				<el-table-column prop="noticeContent" label="公告内容" align="center" />
				<el-table-column prop="noticePerson" label="发布人" align="center" />
				<el-table-column prop="buildId" label="公告楼栋" align="center" />
				<el-table-column prop="noticeTime" label="公告时间" align="center">
					<template #default="{ row }">
						{{ new Date(row.noticeTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="{ row }">
						<el-popconfirm
							width="220"
							confirm-button-text="OK"
							cancel-button-text="No, Thanks"
							:icon="InfoFilled"
							icon-color="#626AEF"
							title="Are you sure to delete this?"
							@confirm="deleteNoticeByHou(row)">
							<template #reference>
								<el-button link type="danger">删除</el-button>
							</template>
						</el-popconfirm>

						<el-button link type="warning" @click="handleMod(row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 修改对话框 -->
		<el-dialog v-model="showModDialog" width="400" title="编辑">
			<el-form>
				<el-form-item label="公告编号">
					<el-input v-model.number="containt.noticeId" readonly />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input
						type="textarea"
						v-model.trim="containt.noticeContent"
						resize="none"
						maxlength="200"
						:show-word-limit="true" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button plain type="primary" @click="submitModfiy">确认修改</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>

import { InfoFilled } from '@element-plus/icons'

import { deleteNoticeByHou,updateNoticeByHou } from '@/utils/axios/domiRequests'
import { reactive, ref } from 'vue'

const $emit=defineEmits(['mod'])
const props = defineProps({
	flag:{
		type:Boolean,
		default:false
	},
	noticeData: {
		type: Array,
		default: [
			{
				noticeId: 'a1212',
				noticeContent: '发起进攻',
				noticePerson: '宿管2',
				buildId: 15,
				noticeTime: new Date('2024-05-11T12:00:50.000+00:00').toLocaleDateString(),
			},
		],
	},
})
const showModDialog = ref(false)

const containt = reactive({
	noticeId: "",
	noticeContent: '',
})

const handleMod = (val) => {

	if(props.flag){
		$emit("mod",val)
		return
	}
	showModDialog.value = true 
	containt.noticeId=parseInt(val.noticeId)
	containt.noticeContent=val.noticeContent
	
}

const submitModfiy=async()=>{
	containt.noticeId=parseInt(containt.noticeId)
	await updateNoticeByHou(containt)
	showModDialog.value=false
}

const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}
</script>

<style scoped lang="sass"></style>
